<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }">


      <a-button type="primary" @click="add">增加</a-button>
      <a-table :columns="columns" :data-source="data" rowKey="id"  :loading="loading" :pagination="false">
        <template #cover="{text}">
          <a-image
              :width="50"
              :src="text"
              class="book-cover"
          />
        </template>
        <template #action="{record }">
          <a-space>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
            <a-popconfirm
                title="您确定删除该条信息"
                ok-text="确认"
                cancel-text="取消"
                @confirm="del(record.id)"
            >
              <a-button type="primary" danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>

    </a-layout-content>
  </a-layout>
  <a-modal v-model:visible="visible" title="Title" @ok="handleOk">
    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">

      <a-form-item label="名称">
        <a-input v-model:value="formState.name"/>
      </a-form-item>
      <a-form-item label="父级id">
        <a-select
            ref="select"
            v-model:value="formState.parent"
        >
          <a-select-option v-for="item in data" :key="item.id" :value="item.id" :disabled="item.id===formState.parent">{{item.name}}</a-select-option>

        </a-select>
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="formState.sort"/>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="handleCancel">Return</a-button>
      <a-button key="submit" type="primary" :loading="loading" @click="handleOk">Submit</a-button>
    </template>

  </a-modal>
</template>
<script lang="ts">
import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
import {defineComponent, onMounted, ref} from 'vue';
import { categorySave, categoryDel, categoryAll } from '@/api'
import {message} from 'ant-design-vue'
import {Tool} from '@/util/tool'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '上级分类',
    dataIndex: 'parent',
    key: 'parent',
  },
  {
    title: '排序',
    key: 'sort',
    dataIndex: 'sort',
  },
  {
    title: 'id',
    key: 'id',
    dataIndex: 'id',
  },
  {
    title: 'Action',
    key: 'action',
    slots: {customRender: 'action'}
  },
];


export default defineComponent({
  setup() {
    let data = ref()
    let loading = ref(true)
    const mloading = ref<boolean>(false);
    const visible = ref<boolean>(false);
    const searchState = ref({value:""})

    let formState = ref({});
    onMounted(() => {
      hander()

    })
    /**
     * 查询列表方法
     */
    const hander = async () => {
      let res = await categoryAll();
      let ret = res.data
      if(ret.success){

        let tree = []
        tree = Tool.array2Tree( res.data.content,0)
        data.value = tree
        console.log(tree)
      } else {
        console.log("失败了")
      }

      loading.value = false
    }
    /**
     * 新增/编辑
     */
    const handleOk = async () => {
      mloading.value = true;
      let res = await categorySave(formState.value)
      if (res.data.success) {
        await hander()
        mloading.value = false;
        visible.value = false;
      } else {
        message.error(res.data.message)
      }

    }
    const handleCancel = () => {
      visible.value = false;
    }
    const edit = (item: any) => {
      formState.value = item
      visible.value = true;
    }
    /**
     * 增加电子书
     */
    const add = () => {
      visible.value = true;
    }
    const del = async (id: number) => {
      await categoryDel(id)
      await hander()
    }

    const search = async () => {
      console.log()
      await hander()
    }

    return {
      data,
      columns,
      loading,
      visible,
      handleOk,
      handleCancel,
      edit,
      add,
      del,
      search,
      searchState,
      mloading,
      formState,
      labelCol: {span: 4},
      wrapperCol: {span: 14},

    };
  },
  components: {
    SmileOutlined,
    DownOutlined,
  },
});
</script>
<style scope>
.book-cover {
  border-radius: 8%;
}
</style>